<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>胖头鱼的个人博客 | 后台管理</title>

    <link rel="stylesheet" th:href="@{/my/css/reset.css}">
    <link rel="stylesheet" th:href="@{/element-ui/css/element-ui.css}">

    <link rel="stylesheet" th:href="@{/my/css/admin/fragment.css}">
    <link rel="stylesheet" th:href="@{/my/css/admin/add.css}">

    <!-- md-editor -->
    <link rel="stylesheet" th:href="@{/editor-md/css/editormd.css}">

</head>
<body>

<div id="app">
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">
                <el-row class="tac">
                    <el-col :span="24">
                        <el-menu
                                default-active="3"
                                class="el-menu-vertical-demo"
                                background-color="transparent">
                            <el-menu-item index="1" @click="home">
                                <i class="el-icon-s-home"></i>
                                <span slot="title">进入首页</span>
                            </el-menu-item>
                            <el-menu-item index="2" @click="list">
                                <i class="el-icon-folder-checked"></i>
                                <span slot="title">博文列表</span>
                            </el-menu-item>
                            <el-menu-item index="3" @click="add">
                                <i class="el-icon-circle-plus-outline"></i>
                                <span slot="title">添加博文</span>
                            </el-menu-item>
                            <el-menu-item index="4" @click="time">
                                <i class="el-icon-plus"></i>
                                <span slot="title">添时间线</span>
                            </el-menu-item>
                            <el-menu-item index="5" @click="change">
                                <i class="el-icon-unlock"></i>
                                <span slot="title">修改密码</span>
                            </el-menu-item>
                            <el-menu-item index="6" @click="logout">
                                <i class="el-icon-switch-button"></i>
                                <span slot="title">注销登录</span>
                            </el-menu-item>
                        </el-menu>
                    </el-col>
                </el-row>
            </el-aside>
            <el-main>
                <div class="top">
                    <el-card>
                        <div>
                            <el-breadcrumb separator="/">
                                <el-breadcrumb-item><a href="/admin/">首页</a></el-breadcrumb-item>
                                <el-breadcrumb-item><a href="/admin/add">添加博文</a></el-breadcrumb-item>
                            </el-breadcrumb>
                            <div class="btn_add" @click="add_drawer = true">
                                <div >完善文章信息</div>
                            </div>
                        </div>
                    </el-card>
                </div>
                <div class="body">
                    <el-card>
                        <div>
                                <!-- 抽屉 -->
                                <el-drawer
                                        title="添加文章"
                                        :visible.sync="add_drawer"
                                        direction="rtl">
                                    <div class="el_drawer_content">
                                        <el-collapse v-model="names" accordion>
                                            <el-collapse-item title="文章标题" name="1">
                                                <el-input v-model="art_form.title" placeholder="请输入文章标题"></el-input>
                                            </el-collapse-item>
                                            <el-collapse-item title="文章简介" name="2">
                                                <el-input
                                                        type="textarea"
                                                        :rows="5"
                                                        resize="none"
                                                        placeholder="请输入文章简介"
                                                        v-model="art_form.abstracter">
                                                </el-input>
                                            </el-collapse-item>
                                            <el-collapse-item class="tags" title="文章标签" name="3">
                                                <el-select
                                                        v-model="art_form.tags"
                                                        multiple
                                                        filterable
                                                        allow-create
                                                        default-first-option
                                                        class="tags"
                                                        collapse-tags
                                                        placeholder="添加标签">
                                                    <el-option
                                                            v-for="item in tag"
                                                            :label="item.title"
                                                            :value="item.id">
                                                    </el-option>
                                                </el-select>
                                            </el-collapse-item>
                                            <el-collapse-item class="cover" title="文章封面" name="4">
                                                <el-input v-model="art_form.url" placeholder="请输入文章标题"></el-input>
                                                <div class="img">
                                                    <img :src="art_form.url"/>
                                                </div>
<!--                                                <el-upload-->
<!--                                                        class="upload-demo"-->
<!--                                                        drag-->
<!--                                                        action="http://localhost:9090/admin/upload"-->
<!--                                                        :on-success="handleSuccess"-->
<!--                                                        multiple>-->
<!--                                                    <i class="el-icon-upload"></i>-->
<!--                                                    <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>-->
<!--                                                    <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>-->
<!--                                                </el-upload>-->
                                            </el-collapse-item>
                                        </el-collapse>
                                        <div class="btn_submit">
                                            <el-button type="success" @click="art_submit">发布文章</el-button>
                                        </div>
                                    </div>
                                </el-drawer>

                                <div id="editor">
                                    <label>
                                        <textarea style="display: none"></textarea>
                                    </label>
                                </div>
                        </div>
                    </el-card>
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>

<!-- vue.js -->
<script th:src="@{/vue/vue.js}"></script>
<script th:src="@{/axios/axios.min.js}"></script>
<script th:src="@{/element-ui/js/element-ui.js}"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            // 控制抽屉的
            add_drawer: false,
            // 标签
            tag: [
                {id: 'CSS', title: 'CSS'},
                {id: 'HTML', title: 'HTML'},
                {id: 'JavaScript', title: 'JavaScript'},
            ],
            // 折叠面板的, 默认打开 1
            names: ['1'],
            // 文件
            fileList: [],
            // 表单值
            art_form: {
                // 标题
                title: '',
                // 简介的值
                abstracter: '',
                // 标签的选择器
                tags: [],
                // 图片地址
                url: '',
                // 内容
                content: ''
            }
        },
        methods: {
            home() {
                console.log('home');
                setTimeout(() => {
                    location.href = '/admin/';
                },1)
            },
            list() {
                console.log('list');
                setTimeout(() => {
                    location.href = '/admin/list';
                },1)
            },
            add() {
                console.log('add');
                setTimeout(() => {
                    location.href = '/admin/add';
                },1)
            },
            time() {
                console.log('add');
                setTimeout(() => {
                    location.href = '/admin/time';
                },1)
            },
            change() {
                console.log('change');
                setTimeout(() => {
                    location.href = '/admin/change';
                },1)
            },
            logout() {
                axios.get("/admin/logout").then(res => {
                    if ( res.data.code === 200) {
                        this.$message.success("注销成功");
                        localStorage.setItem("token", "No");
                        setTimeout(() => {
                            location.href = '/';
                        },1500)
                    }
                })
            },

            // 上传成功的钩子函数
            handleSuccess(response) {
                this.art_form.url = response;
                this.$message.success('上传成功');
            },
            // 提交方法
            art_submit() {

                let tt = this.art_form.tags
                let tags = [];
                for ( let i = 0; i < tt.length; i++) {
                    let tag = {tag: tt[i]}
                    tags.push(tag)
                }
                let data = {
                    title: this.art_form.title,
                    abstracter: this.art_form.abstracter,
                    tags: tags,
                    url: this.art_form.url,
                    content: editor.querySelector('.editormd-markdown-textarea').value,
                };
                axios.post('/admin/submit', data).then(res => {
                    console.log(res.data);
                    if ( res.data.code === 200) {
                        this.add_drawer = false;
                        this.$message.success(res.data.msg);
                    } else {
                        this.$message.warning(res.data.msg)
                    }
                })
            }
        }
    })
</script>

<!-- md 编辑器的配置 -->
<script th:src="@{/jquery/jquery.min.js}"></script>
<script th:src="@{/editor-md/lib/marked.min.js}"></script>
<script th:src="@{/editor-md/lib/prettify.min.js}"></script>
<script th:src="@{/editor-md/editormd.js}"></script>
<script>
    $(function () {
        var editor = editormd("editor", {
            width: "100%",
            height: "400",
            toolbarIcons: ["undo", "redo", "|", "bold", "hr", "|", "preview", "watch", "|", "fullscreen", "info", "testIcon", "testIcon2", "file", "faicon", "||", "watch", "fullscreen", "preview", "testIcon"],
            path: "/editor-md/lib/",
        });
    })
</script>

</body>
</html>